<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title></title>

    <script src="/static/jquery-1.9.1.min.js"> </script>
    <script src="/static/bootstrap.min.js"> </script>
<link rel="stylesheet" href="/static/bootstrap.min.css">
  
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="/static/css/verify.css">
 
<!--引入JS-->
<script type="text/javascript" src="/static/js/verify.js"></script>



</head>
<body> <div class="container-fluid">
    <div class="row" style="height: 100px">
    
    </div>
    <div class="row">
        <div class="col-xs-8 col-md-4 col-md-offset-4 col-xs-offset-2">
            <h1 style='margin-left:100px; font-size:70px;'>邮箱注册界面 </h1>
        </div>
    </div>
    <div class="row mt20">
        <div class="col-xs-8 col-md-4 col-md-offset-4 col-xs-offset-2">
             
                <form action="{:url('index/Index/doemail')}" method='post' > 
                  <div class="form-group " style='margin-top: 20px;'>
                    <label  style='font-size:40px;margin-top:50px;' for="exampleInputPassword1">邮箱:</label>
                    <input  style='height:100px;font-size:40px;width:600px;'  required  onblur='email2()' type="text" class="form-control" placeholder="邮箱" name="email">
                  
               
                <div class="form-group">
                    <label  style='font-size:40px;margin-top:50px;' for="exampleInputPassword1">密码:</label>
                    <input  style='height:100px;font-size:40px;width:600px;'  required type="password" maxlength="32" onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')" name="pwd" class="form-control" id="exampleInputPassword1" placeholder="密码长度为6-32位" >
                </div>
 <div class="form-group">
                    <label  style='font-size:40px;margin-top:50px;' for="exampleInputPassword1">确认密码:</label>
                    <input  style='height:100px;font-size:40px;width:600px;'  required type="password" maxlength="32" onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')" name="rpwd" class="form-control" id="exampleInputPassword2" placeholder="再输一次" >
                </div>
                <div id="mpanel1" style="width=1000px; font-size:40px;margin-top:70px;"><!-- 滑动验证 --></div>

    
 <div class="input-group " style='margin-top: 20px;'>
                    <label  style='font-size:40px;margin-top:50px;' for="exampleInputPassword1">邮件验证码:</label>
                    <input  style='height:100px;font-size:40px;width:400px;'  required  maxlength="4" onkeyup="value=value.replace(/\D/g, '')"   type="text" class="form-control" placeholder="邮件验证码"  name="emailCode" >
                    <span class="input-group-btn">
                <button   disabled='disabled' style="margin-left: -10px;margin-top: 111px;font-size:40px;height:100px;" class="btn btn-default" id="email" type="button">点击获取</button>
                    </span>
                </div>
              
                <div class="input-group " style='margin-top: 20px;margin-left:150px; '>

                    <button type="submit" id='btn' disabled='disabled'   style='margin-left: -140px;font-size:40px;width:600px;height:100px;margin-top: 20px;'   class="btn btn-default">注册</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                </div>

            </form>
        </div>
    </div>
</div>

 
</div>
<script>
    // 滑动验证
     //这里的初始化是滑动&拼图的标志slideVerify
$('#mpanel1').slideVerify({
    //滑动验证码type=1，拼图验证码type=2
    type : 1,
     
    //验证成功以后的回调
    success : function() {
        alert('验证匹配！');
        aa();
        
    }
   
});
  
    function aa(){
        $('#btn').attr('disabled',false);
        $('#email').attr('disabled',false);
    }
 
 


    $('#email').click(function sendmail() {

        var email = $("input[name='email']").val();
        $.ajax({
            method: 'post',
            url: "{:url('index/index/sendmail')}",
            dataType: 'json',
            data: {
                "email": email,
            },
            success: function (data) {
                console.log(data);
                if (data > 0) {
                    alert('发送成功');

                } else {
                    alert('发送失败');
                }

            },
            error: function () {
                alert('服务器繁忙请稍后重试');
            }
        });
    })

function email2(){
      var email = $("input[name='email']").val();

  var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
    if(!reg.test(email))
    {
        alert("邮箱格式不对");
        return false;
    }
}
      
     
</script>


</body>
</html>